<template>
  <div class="big-screen-box">
    <div id="big-screen" ref="appRef" flex flex-col>
      <div w-full h-80px bg-black font-bold text-40 flex justify-center items-center>大屏基本模板</div>
      <div flex flex-1>
        <div style="width: 25%" color="#000000" border>左侧</div>
        <div style="width: 50%" color="#000000" border>中间</div>
        <div style="width: 25%" color="#000000" border>右侧</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useDraw } from '@/hooks/useDraw.js'
import { ref } from 'vue'
let appRef = ref(null)
/*
 * 如需使用大屏缩放
 * 请传入组件实例
 * 插件会自动捕获并进行缩放配置
 * 无需在父组件在mounted中捕获组件实例
 * */
useDraw(appRef)
</script>

<style scoped lang="scss">
.big-screen-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#big-screen {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}
</style>
